<template>
  <div>
    <!-- 头部区域组件 -->
    <TopArea />
    <!-- 地图实例 -->
    <div id="map"></div>
    <!-- 路由出口 -->
    <router-view></router-view>
    <!-- 底部组件 -->
    <BottomArea />
    <!-- 切换插件的一个按钮 -->
    <div class="btns">
      <el-button style="padding: 4px 16px" @click="handleDirections">导航</el-button>
    </div>
  </div>
</template>

<script setup>
import TopArea from "./components/TopArea.vue";
import BottomArea from "./components/BottomArea.vue";
import mapboxgl from "mapbox-gl";
import "mapbox-gl/dist/mapbox-gl.css";
import { onMounted, provide, ref } from "vue";
import { Scene } from "@antv/l7";
import { Mapbox } from "@antv/l7-maps";
import useControls from "./hooks/useControls";
import MapboxDirections from "@mapbox/mapbox-gl-directions/dist/mapbox-gl-directions";
import "@mapbox/mapbox-gl-directions/dist/mapbox-gl-directions.css";

mapboxgl.accessToken =
  "pk.eyJ1IjoieHpkbWFwZ2lzIiwiYSI6ImNtOWtxbXU3eTBwcGEya3BvYW9ubWZ6bWwifQ.bn8nv2PPHfWDeDWExmQamQ";
let map, scene, directions;
let directionsShow = ref(false);
onMounted(() => {
  //mapbox实例
  map = new mapboxgl.Map({
    container: "map",
    style: "mapbox://styles/mapbox/dark-v11",
    center: [114.3, 30.59],
    zoom: 1,
    projection: "globe",
  });
  scene = new Scene({
    id: "map",
    map: new Mapbox({
      mapInstance: map,
    }),
    logoVisible: false,
  });
  map.on("load", function () {
    let center = map.getCenter();
    map.setFog({
      color: `hsl(0,0%,${Math.abs(center.lng / 180)})`,
      "high-color": `hsl(0,0%,${Math.abs(center.lng / 180)})`,
    });
  });
  //只要地球转动 添加fog效果
  map.on("move", function () {
    let center = map.getCenter();
    //添加的fog效果 根据中心点的位置来设置明亮
    //hsl(色相,饱和度,明亮度)
    map.setFog({
      color: `hsl(0,0%,${Math.abs(center.lng / 180)})`,
      "high-color": `hsl(0,0%,${Math.abs(center.lng / 180)})`,
    });
  });
  //添加l7地图控件 组合式函数 组件 (逻辑复用)
  useControls(scene, map);
  //导航插件实例
  directions = new MapboxDirections({
    accessToken: mapboxgl.accessToken,
  });
  provide("mapScene", {
    map,
    scene,
  });
});
function handleDirections() {
  if (!directionsShow.value) {
    map.addControl(directions, "top-left");
  } else {
    map.removeControl(directions);
  }
  //点击按钮 加载/卸载导航插件
  directionsShow.value = !directionsShow.value;
}
</script>

<style lang="scss" scoped>
#map {
  width: 100%;
  height: 100vh;
}

.btns {
  position: fixed;
  top: 200px;
  left: 10px;

  button {
    padding: 10px 20px;
  }
}
</style>
